<template>
	<van-cell-group v-show="display">
	  	<van-field v-model="form.code" placeholder="请输入验证码" label="手机验证码" clearable>
	  		<SendPhoneCode slot="icon" :phone="form.phone" :sendurl="sendurl" cookiename="register"></SendPhoneCode>
	  	</van-field>
	  	<div class="van-cell van-field mt-10">
	  		<van-button  size="large" @click="prev">上一步</van-button>
	  	</div>
	  	<div class="van-cell van-field mt-10">
	  		<van-button type="primary" class="" size="large" @click="formValidate">{{btnText}}</van-button>
	  	</div>
	</van-cell-group>
</template>
<script>
	import { Field ,CellGroup,Button} from 'vant';

	import Axios from 'touch/config/axios';

	import SendPhoneCode from 'touch/components/common/send-phone-code';

	import Va from 'async-validator';

	const formRule = {
	  	code : [
	  		{type : "string" , required: true , message : '请填写验证码'},
	  	],
	};

	export default {
		props :{
	        btnText :  {
	            type: String,
	            required : true,
	        },
	        display :  {
	            type: Boolean,
	            default : false,
	            required : true,
	        },
	        callback :  {
	            type: Function,
	            required : true,
	        },
	        prev :  {
	            type: Function,
	            required : true,
	        },
	        sendurl : {
	        	type: String,
	            default : '',
	            required : true,	
	        }
		},
		components:{
			[Field.name] : Field,
			[CellGroup.name]: CellGroup,
			[Button.name] : Button,
			SendPhoneCode,
        },
        data (){
	        return{
	            form :{
	            	phone : '',
	            	phonekey : '',
	            	code : '',
	            },
	            btn :{
	            	disabled : false,
	            	loading : false,
	            },
	        }
	    },
	    methods: {
	    	//上一步
	    	last(){
	    		this.prev();
	    	},
			//数据验证
			formValidate(){
				new Va(formRule).validate(this.form, (errors, fields) => {
				  	if(errors) {
				  		this.$toast(errors[0].message);
				  	}else{
				  		this.callback(this.form);
				  	}
				});
			},
	    },
	    created :function(){
	    },
	    watch:{
	    	display :{
	    		immediate:true,
			    handler:function(newVue,oldVue){
			     	if(!newVue){
		    			this.form.phone = '';
		    			this.form.phonekey = '';
		    			this.form.code = '';
		    		}
			    }
	    	},
	    }
	}
</script>
<style>
	.checkphone .icon{padding-right: 15px;}
	.checkphone .btn{margin-top: 15px;}
	.checkphone.show{display: initial;}
	.checkphone.hide{display: none;}
</style>